<template>
    <div class="login_box">
        <div class="login_con">
            <div class="con_box">
                <div class="login_tit">登录</div>
                <div class="login_form">
                    <el-form :model="form" :rules="rules" ref="loginForm" class="demo-ruleForm">
                        <el-form-item prop="account">
                            <i class="el-icon-user" style="font-size: 18px;color: #a3a4a7;margin-left: 10px;"></i>
                            <el-input v-model="form.account" placeholder="请输入账号"
                                style="display: flex;align-items: center;"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <i class="el-icon-lock" style="font-size: 18px;color: #a3a4a7;margin-left: 10px;"></i>
                            <el-input v-model="form.password" placeholder="请输入密码" @keyup.enter.native="submitForm()"
                                style="display: flex;align-items: center;">
                            </el-input>
                        </el-form-item>
                        <el-form-item style="margin: 20px 0 0;">
                            <el-button type="primary" @click="submitForm()">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import { post } from '@/utils/request'


export default {
    data() {
        return {
            form: {
                account: '',
                password: ''
            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },

                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },

                ],
            },

            navList: [
                {
                    path: '',
                    name: '首页',
                    icon: 'el-icon-s-home',
                    children: [
                        { path: 'home', name: '系统首页' },
                        { path: 'page2', name: '登录日志' },

                    ]
                },

                {
                    path: '',
                    name: '商品管理',
                    icon: 'el-icon-s-goods',
                    children: [
                        { path: 'goods', name: '商品列表' },
                        { path: 'add_good', name: '添加商品' },
                        { path: 'processGoods', name: '商品审核' },
                        { path: 'goodsRecycling', name: '商品回收站' },
                    ]
                },

                {
                    path: '',
                    name: '类目与规格',
                    icon: 'el-icon-notebook-2',
                    children: [
                        { path: 'categoryList', name: '类目列表' },
                        { path: 'specList', name: '规格列表' },

                    ]
                },

                {
                    path:'',
                    name:'库存管理',
                    icon:'el-icon-s-goods',
                    children:[
                        {path:'inventoryList',name:'库存列表'},
                        {path:'inboundRecord',name:'入库记录'},
                        {path:'transferOutboundRecord',name:'退货入库'},
                        {path:'outboundRecord',name:'出库记录'},

                    ]
                },

                {
                    path: '',
                    name: '订单管理',
                    icon: 'el-icon-s-order',
                    children: [
                        { path: 'orders', name: '订单列表' },
                        { path: 'exchangeorders', name: '退换列表' }
                    ]
                },

                {
                    path:'',
                    name:'会员管理',
                    icon:'el-icon-s-goods',
                    children:[
                        {path:'memberList',name:'会员列表'},
                        {path:'memberLev',name:'会员等级'},

                    ]
                },

                {
                    path: '',
                    name: '运营管理',
                    icon: 'el-icon-film',
                    children: [
                        { path: 'express_template', name: '快递模板' },
                        { path: 'maxout', name: "满减活动" },
                        { path: 'giveaway_event', name: "满赠活动" },
                    ]
                },

                {
                    path:'',
                    name:'文化管理',
                    icon:'el-icon-s-goods',
                    children:[
                        {path:'celebIntroduce',name:'名人介绍'},
                        {path:'articleList',name:'文章管理'},

                    ]
                },

                {
                    path: '',
                    name: '财务管理',
                    icon: 'el-icon-money',
                    children: [
                        { path: 'financial_statements', name: '财务报表' },
                    ]
                },

                {
                    path:'',
                    name:'系统管理',
                    icon:'el-icon-s-tools',
                    children:[
                        // {path:'user',name:'用户列表'},
                        {path:'userManage',name:'用户管理'},
                        {path:'roleManage',name:'角色管理'},

                    ]
                },



            ],
        }
    },
    methods: {
        submitForm() {
            if(this.form.password == ''){
                this.$message.error("请输入密码");
                return;
            }

            // this.$refs.loginForm.validate((valid) => {
            //     if (valid) {


            //     } else {
            //         this.loading = false
            //         this.$message.error("请输入账号和密码")
            //         return false
            //     }
            // });


            post('/login', {
                username: btoa(this.form.account),
                password:btoa(this.form.password)
            }).then(response => {
               console.log( response.data.token)
                localStorage.setItem("token", response.data.token)
                this.$router.push({ path: '/home' })

            }).catch(error => {
                console.error(error); // 在这里处理错误  
            });
          
          
        },

        // 手机号验证
        isphoneNumber(phoneNumber) {
            // console.log(phoneNumber)
            let xreg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
            if (phoneNumber.length > 0) {
                return xreg.test(phoneNumber)
            } else {
                return false
            }
        },
    },

    mounted(){
        localStorage.setItem("ms_menu", JSON.stringify(this.navList))
        const token = localStorage.getItem("token")
        if(token!=null && token.length!=0){
            this.$router.push({ path: '/home' })
        }
    }


}
</script>
<style lang="scss">
html {
    height: 100%;
}

body {
    height: 100%;
}

#app {
    height: 100%;
}

.login_box {

    width: 100%;
    height: 100%;
    background-image: url(../assets/img/login-bg.png);
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login_con {
    width: 500px;
    // height: 380px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    display: flex;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // margin-top: -190px;
    // margin-left: -250px;
    padding: 20px;
    min-width: 260px;
    border-radius: 8px;

    .con_box {
        width: 100%;
        height: 100%;
        background: #fff;
        padding: 20px;
        margin: auto;
        border-radius: 8px;
    }

    .login_tit {
        text-align: center;
        border-bottom: 1px solid #e5e2e2;
        padding-bottom: 16px;
        line-height: 40px;
        font-size: 26px;
        color: #58626b;
        font-weight: 700;
    }

    .login_form {

        padding: 20px 20px 0;

        .code_class,
        .count_class {
            margin-left: 10px;
            color: #333;
            font-size: 14px;
            cursor: pointer;
        }

        .el-form-item__content {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
        }

        .el-input__inner {
            border: 0;
            height: 40px;
            line-height: 40px;
            padding: 0 15px 0 10px;
            font-size: 16px;
        }

        .el-button--small {
            width: 100%;
            height: 40px;
            font-size: 16px;
            padding: 0 15px;
        }

        .el-button--small span {
            color: #fff;
        }
    }
}
</style>